import { BankOutlined, CaretRightOutlined, PlayCircleOutlined, ProfileFilled, RightOutlined, SaveFilled, SettingOutlined } from "@ant-design/icons"
import { useReactFlow } from "@xyflow/react"
import { Button, Dropdown, MenuProps, Space } from "antd"
import { memo } from "react"

const styleButton = {
    height: 34,
    border: "1px solid #E5E6EC", zIndex: 100
}

interface Props {
    onClick: (type: "ai" | "log" | "save" | "api" | "layout" | "import" | "export") => void
}

const TooltipButton = (props: Props) => {
    const { onClick } = props
    const { getNodes, getEdges, setEdges, setNodes } = useReactFlow();

    /** 导出数据 */
    const exportData = () => {
        // 创建要导出的数据对象
        const flowData = {
            nodes: getNodes(),
            edges: getEdges()
        };

        // 转换为JSON字符串
        const jsonString = JSON.stringify(flowData, null, 2);

        // 创建Blob对象
        const blob = new Blob([jsonString], { type: 'application/json' });
        const url = URL.createObjectURL(blob);

        // 创建下载链接并触发下载
        const link = document.createElement('a');
        link.href = url;
        link.download = 'flow-data.json';
        document.body.appendChild(link);
        link.click();

        // 清理
        URL.revokeObjectURL(url);
        document.body.removeChild(link);
    }

    /** 导入数据 */
    const importData = (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = (e) => {
            try {
                const jsonData = JSON.parse(e.target?.result as string);
                if (jsonData.nodes && jsonData.edges) {
                    setNodes(jsonData.nodes);
                    setEdges(jsonData.edges);
                }
            } catch (error) {
                console.error('导入文件异常：', error);
            }
        };
        reader.readAsText(file);
    };

    const items: MenuProps['items'] = [
        {
            key: '1',
            label: (
                <div onClick={() => onClick("layout")} className="w-[140px]">
                    自动布局
                </div>
            ),
        },
        {
            key: '2',
            label: (
                <>
                    <input
                        type="file"
                        accept=".json"
                        onChange={importData}
                        style={{ display: 'none' }}
                        id="file-upload"
                    />
                    <div onClick={() => document.getElementById('file-upload')?.click()}>
                        导入DSL
                    </div>
                </>
            ),
        },
        {
            key: '3',
            label: (
                <div onClick={exportData}>
                    导出DSL
                </div>
            ),
        }
    ];


    return <div style={{ position: 'absolute', right: 0, top: 17, zIndex: 9, display: 'flex', width: 266 }}>
        <Space>
            <Button
                style={{ ...styleButton }}
                onClick={() => onClick("ai")}
                icon={<img src="img/uil--play.svg" className="h-[16px]"/>}
            >运行</Button>
            <Button
                style={{ ...styleButton }}
                onClick={() => onClick("save")}
            >保存</Button>
            <Dropdown menu={{ items }} arrow={{ pointAtCenter: true }} trigger={["click"]}>
                <Button type="primary" icon={<SettingOutlined />}>功能</Button>
            </Dropdown>
        </Space>
    </div>
}

export default memo(TooltipButton)